<template>
  <VisualEditor v-model="visualData" :form-data="formData" :custom-props="customProps">
    <!-- <template #subBtn>
      <el-button v-if="formData.type === 'gb'">钢笔按钮</el-button>
      <el-tag v-else>自定义的标签</el-tag>
    </template> -->
  </VisualEditor>
</template>

<script>
import { defineComponent } from 'vue';
import { VisualEditor } from '@/packages/visual-editor';
import { EditorRenderElement } from '@/packages/models/editor.model';
import { NumberRange } from '@/packages/components/number-range';
import data from './editor-data.json';

export default defineComponent({
  name: 'Editor',
  components: {
    VisualEditor,
  },
  data() {
    return {
      visualData: data,
      formData: {
        username: 'admin',
        maxLevel: '5',
        minLevel: '1',
        detail: null
      },
      customProps: {
        subBtn: {
          onClick: () => {
            this.$notify({message: '执行提交'});
          },
        },
        typeSelect: {
          onChange: (val) => {
            this.$notify({message: val});
            this.formData.detail = null;
          }
        }
      },
    };
  },
});
</script>

<style lang="scss">
</style>
